﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Campus.aspx.cs" Inherits="WebApplication01.Campus" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>校区管理</title>
    <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrapTable/bootstrap-table.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table.js"></script>
    <script src="Content/bootstrapTable/bootstrap-table-zh-CN.js"></script>
    <script>
        $(function () {
            getData();
            //动态绑定事件
            $("#btnQuery").click(function () {
                //重新加载表格
                Search();
            })
            $("#btnAdd").click(function () {
                $("#myModal").modal({
                    backdrop: 'static'
                });
                $("#txtCamName").val("");
                $("#txtBZ").val("");
                $("#hid").val("");
            })

            $("#btnInsert").click(function () {
                $.ajax({
                    url: "AssetHandel/CampusHandel.ashx",
                    type: "post",
                    data: {
                        cName: $("#txtCamName").val(),
                        cBZ: $("#txtBZ").val(),
                        sType: "update",
                        ID: $("#hid").val()
                    },
                    success: function (data) {
                        if (data == "OK") {
                            alert("添加成功");
                            $("#myModal").modal("hide");
                            Search();
                        }
                        else {
                            alert("添加失败");
                        }
                    },
                })

            });
        })
        function getData() {
            $("#tblData").bootstrapTable({
                url: "AssetHandel/CampusHandel.ashx?sType=list",
                pagination: true,
                sidePagination: "server",
                striped: true,
                pageNumber: 1,
                pageSize: 10,
                pageList: [5, 10, 15, 20, 25],
                queryParams: function (params) {//自定义传参
                    var temp = {
                        camName: $("#name").val(),
                        limit: params.limit,
                        offset: params.offset
                    };
                    return temp;
                },
                columns: [
                    {
                        checkbox: true
                    },
                    { field: 'CampusID', title: '编号', width: 10 },
                    { field: 'CampusName', title: '校区名称', width: 80 },
                    {field: 'CampusReMark', title: '备注', width: 80},
                    {
                        field: '', title: '操作', width: 40, formatter: function (value, row, index) {
                            return '<button type="button" class="btn btn-warning btn-sm" onclick="Exit(' + index + ')">编辑</button>&nbsp;&nbsp;<button type="button" class="btn btn-danger btn-sm" onclick="Delete(' + row.CampusID + ')">删除</button>';
                        }
                    }
                ]
            })
        }

        function Search() {
            $("#tblData").bootstrapTable("refresh");
        }
        function Exit(index) {
            //弹出模态框
            $("#myModal").modal({
                backdrop: 'static'
            })
            var data = $("#tblData").bootstrapTable("getData");
            $("#hid").val(data[index]["CampusID"]);
            $("#txtCamName").val(data[index]["CampusName"]);
            $("#txtBZ").val(data[index]["CampusReMark"]);
        }

        function Delete(Cid)
        {
            if (confirm("确认删除吗？"))
            {
                
                $.ajax({
                    url: "AssetHandel/CampusHandel.ashx",
                    type: "get",
                    data: { sType: "Del", id: Cid },
                    success: function (value)
                    {
                        if (value == "OK") {
                            alert("确定")
                            Search();
                        }
                        else
                        {
                            alert("删除失败");
                        }
                    }

                })
            }
        }
        //时间格式转换
        //function formatterData(result) {
        //    var sData = new Date(result);
        //    var sYear = sData.getFullYear();
        //    var sMonth = sData.getMonth() + 1;
        //    var sDay = sData.getDate();
        //    //yyyy-MM-dd
        //    return sYear + "-" + (sMonth >= 10 ? sMonth : "0" + sMonth) + "-" + (sDay >= 10 ? sDay : "0" + sDay);
        //}
    </script>
</head>
<body>
    <div class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">校区名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入校区名称" />
            <button type="button" id="btnQuery" class="btn btn-primary">查询</button>
            <button type="button" id="btnAdd" class="btn btn-primary">添加</button>
            <button type="button" id="btnExcel" class="btn btn-primary">导入数据</button>
        </div>

    </div>
    <table id="tblData"></table>
    <%-- 模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">校区信息
                    </h4>
                </div>
                <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="txtCamName" class="col-sm-2 control-label">校区名:</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="txtCamName"
                                placeholder="请输入" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-9">
                            <textarea class="form-control" rows="3" id="txtBZ"></textarea>
                        </div>
                    </div>

                </form>
                    </div>
               
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                        关闭
                    </button>
                     <input id="hid" type="hidden" />
                    <button type="button" class="btn btn-primary" id="btnInsert">
                        提交更改
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
</body>
</html>
